<template>
  <div class="view-container dailylog">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
    <header class="view-header">
      <div class="header-container">
        <div class="header-title">
          <i class="el-icon-s-grid"></i>
          <span>工作日志</span>
        </div>
        <div class="header-form">
          <div class="header-form-item">
            <el-date-picker
              v-model="dailylog.weekDateTime"
              @change="change"
              type="week"
              format="yyyy 第 WW 周"
              :picker-options="pickerOptions"
              :clearable="false"
              placeholder="选择周">
            </el-date-picker>
          </div>
          <div class="header-form-item">
            <el-button type="success" :loading="saveLoading" @click="valid">保存</el-button>
          </div>
          <div class="header-form-item" v-if="showBtn">
            <el-button type="primary" @click="toCurWeek">本周</el-button>
          </div>
        </div>
      </div>
    </header>

    <section class="view-section">
      <el-timeline>
        <el-form>
          <el-timeline-item
            v-for="(item,index) in dailylog.contentList"
            :key="index"
            :timestamp="formatDate(item.beginTime)+'\t'+weekName[index]"
            placement="top"
            type="success"
          >
            <el-input type="textarea" spellcheck="false" v-model="item.logContent" :rows="5"></el-input>
          </el-timeline-item>
        </el-form>

      </el-timeline>
    </section>

  </div>
</template>

<script>
  import dailylogAPI from '@/api/personalOffice/dailylog'
  export default {
    name: "Dailylog",
    data() {
      return {
        pickerOptions: {
          firstDayOfWeek: 1
        },
        dailylog: {
          weekDateTime: '',
          // 数组中的每一项都是一个日志对象
          contentList: []
        },
        weekName: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
        saveLoading: false,
        curWeekTime:''
      }
    },
    created() {
      // 1、一进来就加载本周的工作日志
      this.init()

    },
    computed: {
      showBtn(){
        return this.curWeekTime !== this.dailylog.weekDateTime
      }
    },
    methods: {
      toCurWeek(){
        this.dailylog.weekDateTime = this.curWeekTime
        this.fetchData(this.dailylog.weekDateTime)
      },
      getType(val){
        return val.trim === '' ? 'primary' : 'success'
      },
      init() {
        this.curWeekTime = this.dailylog.weekDateTime = this._util.formatDateToString(new Date())
        this.fetchData(this.dailylog.weekDateTime)
      },
      fetchData(date) {
        // 拉取本周工作日志（xxxx-xx-xx）
        dailylogAPI.getList(date).then(res => {
          this.dailylog.contentList = res
          if (res[0].beginTime === null) {
            let arr = this.getWeekDate(new Date(date))
            for (let i in arr) {
              this.dailylog.contentList[i].beginTime = arr[i]
            }
          }
        })
      },
      getWeekDate(curDate) {
        let arr = []
        let index = curDate.getDay()

        for (let i = index - 1; i >= 1; i--) {
          arr.push(this.getAnyDateByCurDate(curDate, false, i).toLocaleDateString())
        }

        arr.push(curDate.toLocaleDateString())

        for (let i = 1; i <= 7 - index; i++) {
          arr.push(this.getAnyDateByCurDate(curDate, true, i).toLocaleDateString())
        }
        return arr
      },
      getAnyDateByCurDate(curData, flag, days) {
        if (flag) {
          return new Date(curData.getTime() + days * 24 * 60 * 60 * 1000)
        } else {
          return new Date(curData.getTime() - days * 24 * 60 * 60 * 1000)
        }
      },
      valid() {
        /*for (let log of this.dailylog.contentList) {
          if(log.logContent === null || log.logContent.trim === ''){
            this.$message.warning('请完整填写一周日志')
            this.autoFocus()
            return
          }
        }*/
        this.save()
      },
      save() {
        if (this.saveLoading) {
          return
        }

        this.saveLoading = true
        dailylogAPI.saveOrUpdate(this.dailylog).then(res => {
          this.saveLoading = false
        })
      },
      formatDate(val) {
        return this._util.formatDateToString(val)
      },
      change(val) {
        this.dailylog.weekDateTime = this._util.formatDateToString(val)
        this.fetchData(this.dailylog.weekDateTime)
      },
      autoFocus(){
        const arr = document.getElementsByClassName('el-textarea__inner')
        for(let el of arr){
          if(el.value.trim() === ''){
            el.focus()
            break
          }
        }
      }
    }
  }
</script>

<style lang="scss">
</style>

<style scoped lang="scss">


  .date-picker {
    float: right;
  }

</style>
